<template>
    <div class="total page">
        <formHeader tBack :title="this.accountTypeOptions[this.type].content+'明细'" :wColor="true"></formHeader>
        <div class="con">
            <cube-scroll
                    @pulling-down="pullDownRefresh"
                    @pulling-up="pullUpLoad"
                    ref="scroll"
                    :options="options"
                    :data="records"
                    :refreshDelay="20"
            >

                    <totalDetail
                            v-for="(item,index) in records"
                            :key="index"
                            :info="item.info"
                            :time="parseTime(item.time)"
                            :amount="item.amount"
                    ></totalDetail>
            </cube-scroll>
<!--            <totalDetail-->
<!--                    v-for="(item,index) in records"-->
<!--                    :key="index"-->
<!--                    :info="item.info"-->
<!--                    :time="parseTime(item.time)"-->
<!--                    :amount="item.amount"-->
<!--            ></totalDetail>-->
        </div>
    </div>
</template>

<script>
    import totalDetail from '@/components/totalDetail'
    import formHeader from '@/components/form-header'
    import {record} from "../../api/account"
    import {parseTime} from "../../common/js/time"
    import {mapState} from 'vuex'
    export default {
        components:{formHeader,totalDetail},
        activated() {
            // window.addEventListener("scroll", this.scrollBottom, true)
            if(this.$route.query.type!=null){
                this.type = this.$route.query.type
            }
            this.pullDownRefresh()
            this.$nextTick(()=>{
                this.$refs.scroll.refresh()
                this.$refs.scroll.scrollTo(0,0)
            })
        },
        // beforeRouteLeave(to, form, next) {
        //     next()
        //     window.removeEventListener("scroll", this.scrollBottom, true)
        // },
        methods: {
            // scrollBottom() {
            //     // 滚动到页面底部时
            //     const el = this.$refs.scroll
            //     const windowHeight = window.screen.height;
            //     const scrollTop =
            //         document.documentElement.scrollTop || document.body.scrollTop
            //     const contentHeight = el.clientHeight
            //     const toBottom = contentHeight - windowHeight - scrollTop
            //     if (toBottom < 0 ) {
            //         this.pullUpLoad()
            //     }
            // },
            showDefault() {
                this.$createActionSheet({
                    title: '选择类别',
                    data:this.accountTypeOptions,
                    onSelect: (item, index) => {
                        this.type = index
                        this.pullDownRefresh()
                    }
                }).show()
            },
            parseTime(time){
                return parseTime(time)
            },
            getList() {
                const toast = this.$createToast({
                    time: 0,
                    txt: '正在加载'
                })
                if (this.page ==1){
                    toast.show()
                }
                record(this.type,this.page).then(res => {
                    this.records = this.records.concat(this.initRecords(res.data))
                    if (this.page ==1){
                        toast.hide()
                    }
                    this.page  = this.page + 1
                })
            },
            pullDownRefresh() {
                this.page = 1
                this.records = []
                this.totalDe =0
                this.totalIn=0
                this.getList(this.page)

            },
            pullUpLoad() {

                this.getList(this.page)
            },
            initRecords(records){
                return records.map(record => {

                    let temp = record.record


                    let userId = this.userId
                    temp.user = record.toUser
                    temp.otherUser = record.fromUser
                    //自己是转出方
                    if (record.fromUser.id == userId) {
                        temp.amount = -temp.amount
                        temp.user = record.fromUser
                        temp.otherUser = record.toUser
                    }
                    let txt = '转给'
                    if(temp.amount>0){
                        txt = '来自'
                        this.totalIn += temp.amount
                    }else {
                        this.totalDe -=temp.amount
                    }
                    txt += temp.otherUser.name

                    if(temp.info){
                        temp.info = txt+'-'+temp.info
                    }else {
                        temp.info = txt
                    }

                    return temp
                })
            }
        },
        computed: {
            ...mapState({
                "userId":state=>state.user.user.userId
            })
        },
        data() {
            return {
                type:0,
                accountTypeOptions:[
                    {content:"代金券"},
                    {content:"积分数"},
                    {content:"优惠券"},
                    {content:"换购券"},
                    {content:"经验值"},
                    {content:"清货券"},
                    {content:"清货券"},
                    {content:"公益金"}],
                totalIn:0,
                totalDe:0,
                page: 1,
                options: {
                    pullDownRefresh: {
                        txt: ' '
                    },
                    pullUpLoad: true
                },
                records: []
            }
        }
    }
</script>

<style scoped lang="stylus">
.total
    background-color $page-bg
    .con
        overflow:auto
        margin-top 46px
        background-color #fff
        height 100%
        /deep/.cube-scroll-content
            padding-bottom 68px

</style>